/*
 * @Author: 脉迈
 * @Date: 2022-01-21 15:54:48
 * @LastEditors: 脉迈
 * @LastEditTime: 2022-01-26 16:36:13
 */
import React, { useState } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { login } from "../../api/user";
import { saveLocal } from "../../utils/helper";
import styles from "./index.module.scss";
import { useHistory } from "react-router-dom";
// import { useRecoilState } from "recoil";
// import { userRouters } from "store/modules/user";
const Login = () => {
  // const [userRoutersList, setUserRoutersList] = useRecoilState(userRouters);
  const [loginLoading, setLoginLoading] = useState(false);
  const history = useHistory();
  const onFinish = (values: any) => {
    setLoginLoading(true);
    login({ ...values }).then((res: any) => {
      history.replace("/editor");
      saveLocal("ACCESS_TOKEN", res.data.token);
    });
  };
  return (
    <div>
      <div className={styles["form-login-container"]}>
        <h1 className={styles.logo}>H5</h1>
        <div className={styles["form-login-main"]}>
          <Form
            name="login"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请输入您的账号" }]}
            >
              <Input
                placeholder="用户名：ith5"
                size="large"
                value="ith5"
                prefix={<UserOutlined />}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入您的密码" }]}
            >
              <Input.Password
                placeholder="密码：123456"
                value="123456"
                size="large"
                prefix={<LockOutlined />}
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                block
                size="large"
                loading={loginLoading}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login;
